<template>
  <div class="category-modal-content">
    <div class="category-form">
      <el-form
        ref="searchFormRef"
        inline
        :model="searchForm"
        label-width="150px"
        @submit.prevent
      >
        <el-form-item :label="$t('pcdecorate.commonModal.storeName')+'：'">
          <el-input
            v-model.trim="searchForm.shopName"
            clearable
            style="width: 200px"
            :placeholder="$t('pcdecorate.shopMessage.shopNameTips')"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="searchbtn"
            @click="handleSearch"
          >
            {{ $t('pcdecorate.commonModal.search') }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="tables">
      <el-table
        ref="multipTableRef"
        v-loading="tableLoading"
        style="width: 100%"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
        row-key="shopId"
        :data="tableList"
        height="320"
        :class="{'tables-checkedbox': !isMulilt}"
        @select="handleCancelSelected"
        @select-all="handleSelectAll"
        @selection-change="handleSelectChange"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          align="center"
          width="55"
        />
        <el-table-column
          prop="shopName"
          :label="$t('pcdecorate.shopMessage.storeMessage')"
          align="left"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div class="shopName-content">
              <el-image
                :src="checkFileUrl(scope.row.shopLogo)"
                fit="fill"
              >
                <template #error>
                  <div class="image-slot">
                    <img
                      src="@/assets/img/def.png"
                      alt=""
                    >
                  </div>
                </template>
              </el-image>
              <span style="width: calc(100% - 65px);overflow:hidden;text-overflow: ellipsis;white-space: nowrap">{{ scope.row.shopName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          width="200px"
          :label="$t('pcdecorate.shopMessage.shopType')"
          align="center"
        >
          <template #default="scope">
            <div
              v-if="scope.row.type === 0"
              class="noraml-store"
            >
              <span>{{ storeType(scope.row.type) }}</span>
            </div>
            <div
              v-else-if="scope.row.type === 1"
              class="pre-store"
            >
              <span>{{ storeType(scope.row.type) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="shopStatus"
          width="150"
          :label="$t('pcdecorate.shopMessage.shopStatus')"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span
              v-if="scope.row.shopStatus === -1"
              class="tag-text"
            >{{ $t('shop.nonactivated') }}</span>
            <span
              v-else-if="scope.row.shopStatus === 0"
              class="tag-text"
            >{{ $t('shop.closed') }}</span>
            <span
              v-else-if="scope.row.shopStatus === 1"
              class="tag-text active"
            >{{ $t('shop.inOperation') }}</span>
            <span
              v-else-if="scope.row.shopStatus === 2"
              class="tag-text"
            >
              {{ $t('groups.offlineViolation') }}
            </span>
            <span
              v-else-if="scope.row.shopStatus === 4"
              class="tag-text"
            >
              {{ $t('distributionMsg.applying') }}
            </span>
            <span
              v-else-if="scope.row.shopStatus === 3 || scope.row.shopStatus === 5"
              class="tag-text"
            >
              {{ $t('product.pendingReview') }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 12px; text-align: right;"
        :current-page="perProps.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="perProps.perPage"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="perProps.total"
        @size-change="onPageSizeChange"
        @current-change="onPageChange"
      />
    </div>
  </div>
</template>
<script setup>
const emit = defineEmits([
  'handleGoodsSelect'
])
const props = defineProps({
  activeName: {
    type: String,
    default: () => ''
  },
  isMulilt: { // 是否支持多选
    type: Boolean,
    default: () => false
  },
  echoDataList: { // 回显数据
    type: Array,
    default: () => []
  },
  customLinkArr: { // 自定义链接回显数据
    type: Object,
    default: () => {}
  }
})

const searchForm = ref({})
const tableList = ref([]) // 商城列表
let multipleSelection = [] // 表格选中的数据
const tableLoading = ref(false) // 表格loading
const perProps = ref({ // 分页
  page: 1,
  perPage: 10,
  total: 0
})
let showEchData = [] // 回显数据
let flag = false // 用来处理table 方法被触发的问题

const selectRows = ref([])
const selectMap = computed(() => {
  const map = new Map()
  selectRows.value.forEach(item => {
    map.set(item.shopId, item)
  })
  return map
})

const storeType = computed(() => {
  // 商城类型
  return (type) => {
    if (type === 0) {
      return $t('pcdecorate.shopMessage.ordinaryShops')
    } else if (type === 1) {
      return $t('pcdecorate.shopMessage.preferShops')
    } else {
      return ''
    }
  }
})
// 这里拿到取消选中的哪项
const multipTableRef = ref(null)
const handleCancelSelected = (rows, row) => {
  const isMulilt = props.isMulilt

  if (isMulilt) {
    if (rows.includes(row)) {
      selectRows.value.push(row)
    } else {
      const idx = selectRows.value.findIndex(item => item.shopId == row.shopId)
      idx > -1 && selectRows.value.splice(idx, 1)
    }
  } else {
    if (selectMap.value.has(row.shopId)) {
      selectRows.value = []
    } else {
      selectRows.value = [row]
    }
  }
}

// 全选当前页
const handleSelectAll = (rows) => {
  const isSel = rows.length > 0
  // 多选
  if (props.isMulilt) {
    tableList.value.forEach(d => {
      // 判断当前页是否在 selectRows
      const i = selectRows.value.findIndex(_d => _d.shopId == d.shopId)
      if (isSel) { // 选中
        (i == -1) && selectRows.value.push(d)
      } else { // 取消选中
        (i > -1) && selectRows.value.splice(i, 1)
      }
    })
  }
  // 单选 - TODO
}

const handleSelectChange = (rows) => {
  nextTick(() => {
    if (props.isMulilt) {
      emit('handleGoodsSelect', { type: 'storeItem', value: selectRows.value })
    } else {
      emit('handleGoodsSelect', { type: 'storeItem', value: selectRows.value[0] })
    }
  })
  // if (flag) return
  // if (props.isMulilt) { // 当前支持多选
  //   multipleSelection = removeDuplicCateObj([...showEchData, ...rows])
  //   emit('handleGoodsSelect', { type: 'storeItem', value: multipleSelection })
  // } else { // 否则就是单选
  //   multipleSelection = rows
  //   if (multipleSelection.length > 1) {
  //     const delShow = multipleSelection.shift()
  //     tableList.value.forEach(item => {
  //       if (delShow.shopId === item.shopId) {
  //         multipTableRef.value?.toggleRowSelection(item, false)
  //       }
  //     })
  //   }
  //   emit('handleGoodsSelect', { type: 'storeItem', value: multipleSelection[0] })
  // }
}
// 移除重复
const removeDuplicCateObj = (arr) => {
  const obj = {}
  arr = arr.reduce((newArr, next) => {
    if (!obj[next.shopId]) {
      obj[next.shopId] = true
      newArr.push(next)
    }
    return newArr
  }, [])
  return arr
}
// 搜索
const handleSearch = () => {
  getStoreList('search')
}
// 获取商城列表
const getStoreList = (val) => {
  if (val === 'search') {
    perProps.value.page = 1
  }
  const { page, perPage } = perProps.value
  tableLoading.value = true
  http({
    url: http.adornUrl('/platform/shopDetail/searchShops'),
    method: 'get',
    params: http.adornParams({
      current: page,
      size: perPage,
      shopName: searchForm.value.shopName
    })
  }).then(({ data }) => {
    tableList.value = data.records
    perProps.value.total = data.total
    tableLoading.value = false
    multipTableRef.value?.clearSelection() // 清空选择 消除对全选的影响
    selectRows.value.forEach(row => {
      setSelect(row)
    })
    // setDataShow(val) // 回显表格
  }).catch(() => {
    tableLoading.value = false
  })
}

const setSelect = row => {
  tableList.value.forEach(item => {
    if (item.shopId == row.shopId) {
      multipTableRef.value?.toggleRowSelection(item)
    }
  })
}
// 分页每页显示多少条
const onPageSizeChange = (val) => {
  perProps.value.perPage = val
  showEchData = multipleSelection
  getStoreList()
}
// 分页显示第几页
const onPageChange = (val) => {
  perProps.value.page = val
  showEchData = multipleSelection
  getStoreList()
}
// 数据回显
const setDataShow = (val) => {
  flag = true
  const arr = []
  // let otherArr = []
  let userArr = []
  nextTick(() => {
    if (val === 'search') {
      // multipTableRef.value && multipTableRef.value?.clearSelection() // 清除上一次回显内容
    }
    console.log('%c Line:306 🥛 tableList.value', 'color:#DC742D', tableList.value)
    tableList.value.forEach(item => {
      console.log('%c Line:300 🥛 item', 'color:#DB40D0', item)

      multipTableRef.value?.toggleRowSelection(item, true)
      userArr.push(item)
    })
    // tableList.value.forEach(item => {
    //   showEchData.forEach(v => {
    //     if (item.shopId === v.shopId) {
    //       arr.push(item)
    //       multipTableRef.value && multipTableRef.value?.toggleRowSelection(item, true)
    //     } else if (item.shopId !== v.shopId) {
    //       otherArr.push(v)
    //       otherArr = removeDuplicCateObj(otherArr)
    //     }
    //   })
    // })
    userArr = [...arr]
    userArr = removeDuplicCateObj(userArr)
    // 回显的时候，需要emit通知父组件这次是回显，可以直接点击确定
    if (isShowData() || !props.isMulilt) { // 单选通知
      emit('handleGoodsSelect', { type: 'storeItem', value: userArr[0] })
    } else { // 多选通知
      emit('handleGoodsSelect', { type: 'storeItem', value: userArr })
    }
    setTimeout(() => {
      flag = false
    }, 200)
  })
}
// 判断当前是否是多选回显还是单选回显
const isShowData = () => {
  return props.customLinkArr && props.customLinkArr.type !== '' && props.customLinkArr.type === '3'
}

watch(() => props.activeName, (val) => {
  if (val === '3') {
    searchForm.value.shopName = ''
    // 回显数据
    if (isShowData()) {
      const arr = []
      const obj = {
        shopId: props.customLinkArr.link,
        shopName: props.customLinkArr.title
      }
      arr.push(obj)
      showEchData = arr
      multipleSelection = showEchData
    } else {
      // 回显数据
      selectRows.value = JSON.parse(JSON.stringify(props.echoDataList))
    }
    // 获取商城列表
    getStoreList()
  }
})
</script>
<style lang="scss" scoped>
.category-modal-content {
  min-height: 450px;
  max-height: 450px;
  height: 450px;
  overflow-y: auto;
  :deep(.el-input__inner) {
    height: 32px;
  }
  :deep(.table-header) {
    &:nth-child(1) {
      .cell {
        // display: none;
      }
    }
  }
  .tables-checkedbox {
    :deep(.el-checkbox) {
      .el-checkbox__inner {
        position: relative;
        &:after {
          border: 0;
          position: absolute;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: #fff;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .el-checkbox__inner {
        border-radius: 50%;
      }
      &.is-checked {
        .el-checkbox__inner {
          position: relative;
          &:after {
            border: 0;
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #fff;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }
  .category-form {
    .searchbtn {
      width: 68px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #155BD4;
      border-radius: 2px;
      margin: 4px 0 0 10px;
    }
  }
  .tables {
    width: 93%;
    margin: 0 auto;
    margin-bottom: 20px;
    .shopName-content {
      display: flex;
      align-items: center;
      :deep(.el-image) {
        width: 48px;
        height: 48px;
        margin-right: 15px;
      }
    }
  }
  .noraml-store {
    display: flex;
    justify-content: center;
    span {
      min-width: 66px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333333;
      font-size: 12px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 3px;
    }

  }
  .pre-store {
    display: flex;
    justify-content: center;
    span {
      min-width: 66px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #155BD4;
      color: #155BD4 ;
      font-size: 12px;
      border-radius: 3px;
    }
  }
  .tag-text {
    height: 24px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    display: inline-block;
    font-size: 12px;
    padding: 0 8px;
    line-height: 24px;
    &.active {
      border: 1px solid #155BD4;
      color: #155BD4 ;
    }
  }
}

</style>
